<template>
	<scroll-view class="backview" bounces="false">
		<lexiconNavVue title="邀请记录" />
		<view class="bee-top-content-view">
			<view class="top-content-view">
				<view class="content-view">
					<view class="title-back">
						<view class="title-rightview">
							<view class="title-one">邀请记录</view>
							<view class="title-two">Invitation Records</view>
						</view>
					</view>
				</view>
				<view class="bee-banner-bottom"></view>
			</view>
			<view class="bee-banner-bottom"></view>
			<view style="width: 100%; height: 30rpx;"></view>
		</view>
		<view class="bee-plan-badge">
			<view class="gameType-topTitle-view" style="margin: 10px 0rpx;">
				<view class="gameType-topTitle" style="color: white;">
					邀请记录 | Invitation Records
				</view>
				<view class="gameType-line"></view>
			</view>
			<view class="top-menu-title">
				<view class="titleStr">邀请时间</view>
				<view class="titleStr">被邀请人</view>
				<view class="titleStr">积分</view>
				<view class="titleStr">邀请状态</view>
			</view>
			<view class="bottom-content-backView column" :style="{ height: scrollHeight + 'px'}">
				<z-paging :fixed="false" ref="paging" v-model="inviteInfo" @query="getQueryList"
					style="width: 100%; height: 100%;" :default-page-size='20'>
					<view class="content-listView-backview" v-for="(item, index) in inviteInfo" :key="index">
						<view class="list-invite-time" style="width: 32%;">{{item.invitedTime}}</view>
						<view class="list-invite-time" style="width: 23%;">{{item.name}}</view>
						<view class="list-invite-time" style="width: 25%;">积分：{{item.integral}}</view>
						<view class="list-invite-username greencolor" style="width: 17%;"
							v-if="item.isInvited == 'true'">已邀请</view>
						<view class="list-invite-username greencolor" style="width: 17%;" v-else>--</view>
					</view>
				</z-paging>
			</view>
		</view>
		<view class="list-userinfo-InviteCode" :style="{ height: bottomHeight + 'px'}">
			<view class="bottomLineView"></view>
			<view class="getBeePlanTimeStr">您已累计获取蜂计划时长：<text class="redColor">{{dayCounts}}</text> 天</view>
			<button class="unInviteCodeButton">本轮活动已结束</button>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				dayCounts: '',
				scrollHeight: 0,
				inviteInfo: [],
				points: '',
				toDayGetPoints: '',
				formData: {

				},
			}
		},
		onReady() {
			const that = this
			this.bottomHeight = this.$util.getBottomHeight() + 70;
			uni.createSelectorQuery().select('.top-menu-title').boundingClientRect(rect => {
				that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom - this.bottomHeight - 10;
			}).exec();
		},
		methods: {
			getQueryList(pageNo, pageSize) {
				this.formData.pageNum = pageNo;
				this.formData.pageSize = pageSize;
				this.$http.getInvitedList(this.formData).then(res => {
					if (res.code == 200) {
						this.$refs.paging.complete(res.data.inviteInfo);
						this.dayCounts = res.data.dayCounts;
					} else {
						this.$refs.paging.complete(false);
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
		},
		mounted() {
			this.$refs.paging.reload();
		},
	}
</script>
<style lang="less">
	.list-invite-time {
		/* width: 200rpx; */
		font-size: 14px;
		padding-left: 5px;
		box-sizing: border-box;
		color: rgb(255, 255, 255);
		text-align: left;
		height: 45px;
		line-height: 45px;
	}

	.list-userinfo-InviteCode {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: black;
		position: fixed;
		bottom: 0;
	}

	.greencolor {
		color: green;
	}

	.bottomLineView {
		width: 100%;
		height: 1px;
		background-color: white;
		position: absolute;
		top: 0;
	}

	.getBeePlanTimeStr {
		width: 100%;
		height: 25px;
		color: white;
		text-align: center;
		font-size: 12px;
		margin-top: 5px;
	}

	.bee-plan-badge {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		background: var(--beeGradeTopBack);
		border-radius: 15px;
		margin-top: 15px;
	}

	.unInviteCodeButton {
		width: 200px;
		height: 35px;
		border-radius: 18px;
		font-family: 'hzgb';
		font-size: 14px;
		font-weight: 600;
		color: black;
		background-color: #b1b1b1;
		text-align: center;
		line-height: 35px;
	}

	.list-invite-username {
		font-size: 14px;
		text-align: center;
		height: 45px;
		line-height: 45px;
	}

	.redColor {
		font-size: 14px;
		color: red;
		font-weight: bolder;
	}

	.content-listView-backview {
		width: 96%;
		margin-left: 3%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.top-menu-title {
		width: 98%;
		margin-left: 1%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		height: 30px;
	}

	.bottom-content-backView {
		width: 100%;
		display: flex;
		align-items: center;
	}


	.column {
		flex-direction: column;
	}

	.titleStr {
		height: 25px;
		line-height: 25px;
		background: var(--themThesaurusBackColor);
		font-family: 'hzgb';
		padding: 5rpx 30rpx;
		border-radius: 30px;
		margin: 10rpx;
		text-align: center;
		font-size: 12px;
		color: black;
	}

	.bee-top-content-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #140e01;
		box-shadow: 5rpx 0rpx 10rpx 5rpx rgb(0, 0, 0);
	}

	.bee-banner-bottom {
		width: 100%;
		height: 27px;
		background-image: url(../../static/image/fjh/bee-bottom-line.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		z-index: 100;
		margin-top: -26px;
	}

	.top-content-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.content-view {
		width: 100%;
		height: 100px;
		position: relative;
		background-image: url(../../static/image/fjh/bee-banner-top.png);
	}

	.title-back {
		height: 75px;
		width: 325px;
		display: flex;
		position: absolute;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.title-rightview {
		/* width: auto; */
		width: 280px;
		display: flex;
		margin-left: 20px;
		flex-direction: column;
		align-items: flex-start;
		color: white;
	}

	.title-one {
		font-size: var(--titleBigFont2);
		font-family: 'hzgb';
		text-align: left;
		text-shadow: -1px 1px 0 #992722, 1px 1px 0 #992722, 1px -1px 0 #992722, -1px -1px 0 #992722;
	}

	.title-two {
		font-size: var(--titleFontThree);
		font-family: 'hzgb';
		text-align: left;
		margin-top: 10px;
		text-shadow: -1px 1px 0 #992722, 1px 1px 0 #992722, 1px -1px 0 #992722, -1px -1px 0 #992722;
	}
</style>